<template>
	<view class="chanegList">
		<scroll-view 
		class="scrolly" 
		scroll-y="true" 
		:scroll-into-view="viewId"
		>
			<view class="city-box">
				<view class="box">
					<view class="title">
						<icon class="iconfont icon-jiahao"></icon>
						当前城市
					</view>
					<view class="currentCity">{{kcity}}</view>
				</view>
				<view class="box">
					<view class="title">
						热门城市
					</view>
					<view class="hotList">
						<view class="item" v-for="(item,index) of list":key="index">
							{{item}}
						</view>
					</view>
				</view>
				<view class="box-list" v-for="(cities,index) in city":key="index">
					<view class="initial" :id="cities.initial">
						{{cities.initial}}
					</view>
					<view 
					class="city-name" 
					v-for="item of cities.list" 
					:key="item.code"
					@click="click(item.name)"
					>
						{{item.name}}
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		props:['city','letter'],
		// name:"change-list",
		data() {
			return {
				list:['深圳','北京','上海','广州','重庆','深圳','北京','上海','广州','重庆'],
				viewId:'',
				kcity:'北京'
			};
		},
		methods:{
			click(res){
				uni.setStorage({
					key:'city',
					data:res,
				})
				uni.getStorage({
					key:'city',
					success: (res) => {
						this.kcity=res.data
					}
				})
				uni.redirectTo({
					url:'/pages/city/city'
				})
			}
		},
		watch:{
			letter(){
				// console.log(this.letter,1) 
				this.viewId=this.letter
				// console.log(this.viewId) 
			}
		}
	}
</script>

<style>
.chanegList{
	width: 100%;
	background-color: #000000;
	height: 100%;
}
.box{
	background-color: #222222;
	margin-top: 10px;
	/* height: 90px; */
	padding: 0 5px 20px 5px;
}
.title{
	height: 40px;
	line-height: 40px;
	margin-left: 15px;
	color: #FFFFFF;
	font-size: 14px;
}
.currentCity{
	color: #AAAAAA;
	font-size: 15px;
	margin-left: 15px;
	height: 30px;
	line-height: 30px;
}
.hotList{
	width: 100%;
	overflow: hidden;
}
.item{
	width: 30%;
	height: 28px;
	line-height: 25px;
	font-size: 13.5px;
	float: left;
	background-color: #333333;
	margin-left: 2.5%;
	margin-bottom: 10px;
	text-align: center;
	color: #AAAAAA;
}
.box-list{
	padding: 8px 5px;
}
.initial{
	height: 25px;
	line-height: 25px;
	background-color: #000000;
	padding-left: 10px;
	color: #666666;
	font-size: 12px;
}
.city-name{
	background-color: #222222;
	height: 40px;
	line-height: 40px;
	padding-left: 10px;
	color: #AAAAAA;
	font-size: 15px;
}
.scrolly{
	height: 100%;
}
</style>
